<template>
     <!-- 顶部被滚动隐藏后显示的导航栏 -->
        <div class="nav-scroll" :class="{'scroll': isScroll, 'show': isScroll}">
            <div class="nav-container">
                <div class="nav-left">
                    <img src="https://course.myhope365.com/img/logo-text-green.2137bfaa.png" alt="">
                    <div class="nav-box">
                        <a href="">首页</a>
                        <a href="" id="course-classify-scroll">课程分类</a>
                        <a href=""> 教学管理云平台</a>
                        <div class="course-list-scroll">
                        </div>
                    </div>
                </div>
                <div class="nav-right">
                    <div class="search-cart">
                        <input type="text" placeholder="搜索课程~">
                        <button class="search-btn">
                            <img src="" alt="">
                        </button>
                    </div>
                    <div class="chart">
                        <img src="" alt="">
                    </div>
                    <div class="login-box" data-bs-toggle="modal" data-bs-target="#myModal">
                        登录/注册
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
export default {
  data() {
    return {
      isScroll: false,
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.isScroll = window.scrollY > 100;
    },
  },
};
</script>

<style lang="less" scoped>
/* 顶部被滚动隐藏后显示的导航栏 */
.nav-scroll {
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  background-color: white;
  display: none;
  transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 改动4：出现状态 */
.nav-scroll.show {
  display: block;
  transform: translateY(0);
}

/* 以下样式保持你原有内容不变 */
.course-list-scroll {
  z-index: 100;
  width: 150px;
  background-color: white;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.23);
  position: absolute;
  left: 400px;
  top: 60px;
  transition: all 0.3s ease-in-out;
}
.course-list-scroll > .course-item:hover {
  background-color: #90dbc3bd;
}
.course-list-scroll > .course-item > a {
  color: rgba(0, 0, 0, 0.65);
  font: 14px "微软雅黑";
  padding-left: 10px;
}
.nav-container {
  display: flex;
  width: 1160px;
  height: 80px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
.nav-container > .nav-left {
  display: flex;
}
.nav-container > .nav-left > img {
  width: 132px;
  height: 40px;
}
.nav-container > .nav-left > .nav-box {
  display: flex;
  align-items: center;
  margin: 0 10px;
}
.nav-container > .nav-left > .nav-box > a {
  padding: 10px 20px;
  color: black;
  font: bold 16px "微软雅黑";
  text-decoration: none; 
}
.nav-container > .nav-right {
  display: flex;
  align-items: center;
  .search-cart {
    display: flex;
    align-items: center;
    border-radius: 20px; /* 圆角 */
    overflow: hidden;
    width: 300px;
    border: #c4c8c8 solid 1px; /* 边框 */;
    .search-btn {
    background-color: #00bfa5;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}
}

.search-cart input[type="text"] {
    padding: 5px 10px;
    border: none;
    float: left;
    width: 100%;
    margin-bottom: 0;
    text-align: inherit;
    
    &:focus {
        outline: none;
    }
}

}
.nav-container > .nav-right .search-box-button {
  background: #00b278;
  border-radius: 0 20px 20px 0;
}
.nav-container > .nav-right > .chart {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.23);
}
.nav-container > .nav-right > .login-box {
  padding: 5px 10px;
  border-radius: 22px;
  background-color: white;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.23);
  color: #333333;
  font: 15px Microsoft YaHei;
}
</style>